<template>
	<view class="my_container">
		<CustomNavbarTwo :title="pageTitle" />
		<view class="my_container_body">
			<view class="my_container_body_head"></view>
			<view class="background-view-image">
				<u-swiper @click="handleDetail" keyName="content" imgMode="scaleToFill" height="240rpx"
					:list="bannerList" indicator indicatorMode="line" circular radius="24rpx"></u-swiper>
			</view>
			<view class="my_container_body_body">
				<view class="body_left">
					<view>当前积分</view>
					<view>{{ point }}</view>
				</view>
				<image class="body_right" src="../../static/imags/jifen.png"></image>
			</view>
			<view class="duihuan">
				<view class="duihuan_o">积分可兑换精美礼品</view>
				<view class="duihuan_t">去兑换</view>
				<image class="duihuan_image" src="../../static/imags/Down_(下).png"></image>
			</view>
			<view class="zhuanfa">
				<image class="zhuanf_l" src="../../static/imags/pengyouquan.png"></image>
				<view class="zhuanf_c">
					<view>分享获取积分</view>
					<view>+100</view>
				</view>
				<button open-type="share" type="primary" size="mini" class="share-btn">去分享</button>
			</view>
		</view>
	</view>
</template>
<script>
	import CustomNavbarTwo from '@/components/CustomNavbarTwo.vue';
	const api = require('../../util/api.js');
	export default {
		components: { CustomNavbarTwo },
		data() {
			return {
				pageTitle: '转发赚积分',
				showSex: false,
				point: 0,
				bannerList: []
			};
		},
		onLoad() {
			wx.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ['shareAppMessage', 'shareTimeline']
			});
			this.getUserInfo();
			this.getBanner();
		},
		onShareAppMessage(res) {
			const that = this;
			if (res.from === 'button') {
				// 来自页面内分享按钮
				console.log(res.target, 66666);
				that.handleShare();
			}
			return {
				title: '找纸塑网一废纸废塑料AI获客平台', //分享的名称
				path: '/page/fenxiangjifen/index',
				mpId: 'wx312947ac8d5e65e9' //此处配置微信小程序的AppId
			};
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '找纸塑网一废纸废塑料AI获客平台',
				type: 0,
				summary: ''
			};
		},
		methods: {
			//点击轮播图
			handleDetail(e) {
				console.log(e, 666);
				if (this.bannerList[e].clickUrl) {
					uni.navigateTo({
						url: `/page/detail/index?id=${this.bannerList[e].clickUrl}`
					});
				}
			},
			getBanner() {
				this.$https.post(this.$api.getBannerList, { bannerType: '1' }).then((res) => {
					if (res.code === 200) {
						this.bannerList = [res.data[1]]
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			handleShare() {
				this.$https.post(this.$api.getPoint, { point: 100 }).then((res) => {
					if (res.code === 200) {
						console.log(res);
						this.point = this.point + 100;
						// this.point = this.point + 100;
					} else {
						uni.showToast({
							title: '今日已经分享过了，明天再来吧！',
							icon: 'none'
						});
					}
				});
			},
			getUserInfo() {
				this.$https.get(this.$api.getInfo, {}).then((res) => {
					if (res.code === 200) {
						this.point = res.data.user.point;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.my_container {
		width: 100%;

		.my_container_body {
			width: 750rpx;
			height: 1624rpx;
			background: linear-gradient(180deg, #ddffde 0%, #f7f7f7 29%, #f7f7f7 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
			font-style: normal;
			text-transform: none;

			.my_container_body_head {
				width: 686rpx;
				height: 174rpx;
			}

			.background-view-image {
				margin-top: 20rpx;
				width: 686rpx;
				height: 240rpx;
				margin-left: 36rpx;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
			}

			.my_container_body_body {
				margin-top: 20rpx;
				width: 678rpx;
				margin-left: 36rpx;
				height: 158rpx;
				display: flex;

				.body_left {
					width: 550rpx;
					height: 158rpx;

					:nth-child(1) {
						height: 40rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #6c6c6c;
						line-height: 40rpx;
						text-align: left;
					}

					:nth-child(2) {
						height: 106rpx;
						font-weight: 550;
						font-size: 76rpx;
						color: #333333;
						line-height: 106rpx;
						text-align: left;
					}
				}

				.body_right {
					width: 118rpx;
					height: 128rpx;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					margin-top: 26rpx;
				}
			}

			.duihuan {
				height: 44rpx;
				width: 678rpx;
				margin-left: 36rpx;
				display: flex;
				margin-top: 34rpx;

				.duihuan_o {
					width: 526rpx;
					height: 44rpx;
					line-height: 44rpx;
					font-weight: 550;
					font-size: 32rpx;
					color: #333333;
					text-align: left;
				}

				.duihuan_t {
					width: 84rpx;
					height: 44rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #777777;
					line-height: 44rpx;
					text-align: left;
				}

				.duihuan_image {
					width: 32rpx;
					height: 32rpx;
					margin-top: 6rpx;
					margin-left: 8rpx;
				}
			}

			.zhuanfa {
				width: 686rpx;
				height: 148rpx;
				background: #ffffff;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin-top: 30rpx;
				margin-left: 32rpx;
				display: flex;
				align-items: center;

				.share-btn {
					width: 150rpx;
					height: 60rpx;
					border-radius: 40rpx;
					padding: 5rpx 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #1ee825;
				}

				.zhuanf_l {
					width: 80rpx;
					height: 80rpx;
					// margin-top: 34rpx;
					margin-left: 32rpx;
				}

				.zhuanf_c {
					margin-left: 32rpx;
					height: 80rpx;
					width: 370rpx;
					// margin-top: 34rpx;
					text-align: left;

					:nth-child(1) {
						height: 40rpx;
						font-weight: 550;
						font-size: 28rpx;
						color: #333333;
						line-height: 39rpx;
					}

					:nth-child(2) {
						font-weight: 500;
						font-size: 28rpx;
						height: 40rpx;
						color: #ff4400;
						line-height: 39rpx;
					}
				}

				.zhuanf_r {
					width: 138rpx;
					height: 52rpx;
					background: #1ee825;
					border-radius: 112rpx 112rpx 112rpx 112rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #ffffff;
					text-align: center;
					line-height: 52rpx;
					margin-top: 48rpx;
				}
			}
		}
	}
</style>